<template>
    <div class="box-view screen-all flex">
        <el-button @click="onSend">发送数据</el-button>
        <div class="flex row">
            <el-input v-model="title" placeholder="home"></el-input>
            <el-input v-model="name" placeholder="name"></el-input>
            <el-button @click="onCreateHome">创建</el-button>
            <el-button @click="onOpenGame">开始</el-button>
        </div>
        <span>Time：{{gameTime}}s</span>
        <div class="flex row">
            <div class="game-view flex row wrap" :style="`width: ${width}px;height: ${height}px`">
                <div class="gv-item" :style="`width: ${itemWidth}px;height: ${itemHeight}px`" 
                    v-for="(item) in 200" :key="item" 
                    @click="onClick(item)"
                ></div>
            </div>
            <div class="flex" :style="`height: ${height}px`">
                <div class="msg-view flex" :style="`height: ${height-30}px`">
                    <div class="flex row" v-for="(item, index) in msgData.msgList" :key="`mgs-${index}`">
                        <span>{{item.name}}：</span>
                        <span>{{item.msg}}</span>
                    </div>
                </div>
                <div class="flex row aEnd flex-1">
                    <el-input v-model="msg" placeholder="msg" @keyup.enter.native="onSendMsg"></el-input>
                    <el-button @click="onSendMsg">发送</el-button>
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, toRefs, onMounted, onUnmounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {

        var ws = new WebSocket(`ws://localhost:7777/sanguo`);

        const title = ref('');
        const name = ref('');
        const width = ref(1200);
        const height = ref(600);
        const itemWidth = ref(60);
        const itemHeight = ref(60);
        const gameTime = ref(0);
        const msg = ref('');

        const msgData = reactive({
            msgList: [] as any,
        })

        ws.onmessage = function (e) {
            console.log("服务器返回的信息: " + e.data);
            let res = e.data;
            res = JSON.parse(res);

            if(res.type == 1){
                let _data = res.data;
                console.log(_data);
            }else if(res.type == 2){

            }else if(res.type == 6){
                gameTime.value = res.data;
            }else if(res.type == 7){
                // 消息
                let obj = res.data;
                msgData.msgList.push(obj);
            }
        };

        const onSendMsg = () => {
            let params = {
                type: 7,
                data: {
                    name: name.value,
                    msg: msg.value,
                }
            }
            ws.send(JSON.stringify(params));
            msg.value = '';
        }
        
        const onClick = (item: any) => {
            console.log(item);
        }

        const onSend = () => {
            // ws.send("1211121");  
        }

        const onCreateHome = () => {
            // ws.send("create");  
        }

        const onOpenGame = () => {
            // ws.send("open");  
        }

        const utilNumber = (n: string|number) => {
            if(typeof(n) === 'string'){
                return Number(n);
            }else{
                return n;
            }
        }

        onMounted(() => {
            // ws.send("1211121");  


        })

        onUnmounted(() => {
            ws.close();
        })

        return {
            title,
            name,
            width,
            height,
            itemWidth,
            itemHeight,
            gameTime,
            msgData,
            msg,
            onSend,
            onClick,
            onCreateHome,
            onOpenGame,
            onSendMsg,
        }
    },
});
</script>
<style lang="scss" scoped>
    .game-view {
        width: 1200px;
        height: 600px;
        border: 1px solid #F1F1F1;
        margin: 10px;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .gv-item {
        width: 60px;
        height: 60px;
        border: 1px solid #F1F1F1;
        box-sizing: border-box;
    }
    .msg-view {
        width: 200px;
        height: 600px;
        border: 1px solid #F1F1F1;
        margin-top: 10px;
    }
</style>
